<template>
  <div class="myBox" :style="{background:'url('+ LoginUser.cover + ')'}" style="background-size: cover">
    <div class="L">
      <img :src="LoginUser.avatar" style="object-fit: cover;"/>
    </div>
    <div class="C">
      <div class="tit">{{ LoginUser.nickname }}</div>
      <div class="sub">{{ LoginUser.createtime }}</div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="allkbox"></div>
  <div class="myboxcon">
    <router-link to="/user/base/profile">
      <p>个人资料</p>
      <img src="/assets/images/go.png" />
    </router-link>
  </div>
  <div class="myboxcon">
    <router-link to="/user/address/index">
      <p>收货地址</p>
      <img src="/assets/images/go.png" />
    </router-link>
  </div>
  <div class="myboxcon">
    <router-link to="/user/order/index">
      <p>我的订单</p>
      <img src="/assets/images/go.png" />
    </router-link>
  </div>
  <div class="myboxcon">
    <p>消费记录</p>
    <img src="/assets/images/go.png" />
  </div>
  <div class="myboxcon">
    <p>充值记录</p>
    <img src="/assets/images/go.png" />
  </div>
  <div class="myboxcon" @click="logout">
    <p>退出登陆</p>
    <img src="/assets/images/go.png" />
  </div>

  <div class="clear"></div>
</template>
<script>
  export default {
    emits: ['toggle'],
    created() {
      this.$emit('toggle', true)
      this.LoginUser = this.$cookies.get('LoginUser')
      // console.log(this.LoginUser)
    },
    data() {
      return {
        LoginUser: {}
      }
    },
    methods: {
      logout(){
        this.$dialog.confirm({
          title: '退出',
          message:
            '是否确认退出',
        })
        .then(() => {
          this.$cookies.remove('LoginUser')
          this.$router.push('/user/base/login')
        })
      }
    }
  }
</script>
<style>
  .myboxcon a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .myboxcon p {
    margin-top: 0;
  }
</style>